<template>
    <LazyLayoutHeaderM :showMenu="false">
        <div class="title">搜索</div>
    </LazyLayoutHeaderM>

    <div class="page">
        <div class="search-box">
            <img
                class="left-icon"
                :src="`${_oss_}images/mobile/icon-search.png`"
            />
            <input
                class="search-input"
                v-model="keyword"
                type="text"
                placeholder="搜索您喜欢的..."
            />
            <div class="search-btn" @click="onSearch">搜索</div>
        </div>

        <div class="tabs">
            <div
                class="tab-item"
                :class="{
                    active: index == tabActive,
                }"
                v-for="(item, index) in tabs"
                :key="item.value"
                @click="onTabClick(index)"
            >
                {{ item.label }}
            </div>
        </div>

        <div class="result-box">
            <template v-if="tabs[tabActive].data.length">
                <div class="case-group" v-if="tabs[tabActive].value == 'Case'">
                    <CaseItemM
                        v-for="item in getData(tabs[tabActive].data)"
                        :item="item"
                        :key="item.id"
                    />
                </div>

                <TemplateGroupM
                    :list="getData(tabs[tabActive].data)"
                    v-if="tabs[tabActive].value == 'Template'"
                />

                <NewsGroupM
                    :list="getData(tabs[tabActive].data)"
                    v-if="tabs[tabActive].value == 'News'"
                />

                <WorksGroupM
                    :list="getData(tabs[tabActive].data)"
                    v-if="tabs[tabActive].value == 'Works'"
                    search
                    @videoPreview="onVideoPreview"
                />
            </template>

            <el-empty
                :image-size="150"
                description="无数据，换个词搜搜"
                v-else
            />
        </div>
    </div>

    <VideoPreviewM ref="videoPreviewRef" />
</template>
<script setup>
import { useContent } from ".";

const router = useRouter();
const {
    keyword,
    isLoading,
    tabActive,
    tabs,
    pagination,
    onSearch,
    onTabClick,
    getList,
    getData,
    pageChangeHandle,
} = useContent();
const videoPreviewRef = ref(null);

const onBack = () => {
    router.back();
};

const onVideoPreview = ({ item, type }) => {
    videoPreviewRef.value.show(item, type);
};

onMounted(async () => {
    await getList();
});
</script>
<style lang="scss" scoped>
.header {
    position: relative;
    .left-icon {
        width: 15px;
        height: 15px;
        margin-left: 11px;
    }

    .title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 18px;
        font-weight: 400;
        color: #333;
    }
}

.search-box {
    width: 351px;
    height: 40px;
    background: #f1f1f1;
    border-radius: 20px;
    display: flex;
    align-items: center;
    margin: 8px auto;
    overflow: hidden;

    .left-icon {
        width: 14px;
        height: 14px;
        margin: 0 6px 0 11px;
        flex-shrink: 0;
    }

    .search-input {
        width: 100%;
        border: none;
        outline: none;
        font-size: 14px;
        background-color: transparent;

        &::placeholder {
            color: #999;
        }
    }

    .search-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 65px;
        height: 40px;
        background: #5085fb;
        color: #fff;
        font-size: 14px;
        letter-spacing: 4px;
        margin-left: 10px;
        flex-shrink: 0;
    }
}

.page {
    width: 100%;
    height: calc(100% - 44px);
    overflow: hidden;
}

.tabs {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    margin: 0 auto;

    .tab-item {
        font-size: 14px;
        color: #333333;
        line-height: 14px;
        padding: 12px 0;
        cursor: pointer;

        &.active {
            color: #1982f5;
            position: relative;
            font-weight: bold;

            &::after {
                content: "";
                position: absolute;
                width: 20px;
                height: 2px;
                left: 50%;
                bottom: 5px;
                background: #1982f5;
                border-radius: 1px;
                transform: translateX(-50%);
            }
        }
    }
}

.result-box {
    width: 100%;
    height: calc(100% - 56px - 38px);
    background-color: #f5f6fa;
    padding-top: 15px;
    overflow-y: auto;

    .case-group {
        display: flex;
        flex-wrap: wrap;
        padding: 0 15px;
        position: absolute;
    }
}
</style>
